<template>
  <div>
    <div class="header">
      <span style="width: 60px; text-align: right">关键字</span>
      <el-input placeholder="请输入关键字" v-model="req.keyword" style="width: 200px; margin-left: 10px"></el-input>
      <span style="margin-left: 20px">开票日期：</span>
      <el-date-picker v-model="req.dealDate1" value-format="yyyy-MM-dd HH:mm:ss" type="date"
        placeholder="选择起始日期"></el-date-picker>
      <span style="margin-left: 10px; margin-right: 10px">至</span>
      <el-date-picker v-model="req.dealDate2" value-format="yyyy-MM-dd HH:mm:ss" type="date"
        placeholder="选择截至日期"></el-date-picker>
      <el-button type="primary" style="margin-left: 10px" size="small" @click="getCompanyCaseBills()">
        搜索
      </el-button>
      <el-button type="warning" style="margin-left: 10px" size="small" @click="outputExcel">
        Excel导出
      </el-button>
    </div>
    <div class="main">
      <el-table style="overflow: auto" height="100%" :data="res.Items" stripe border highlight-current-row>
        <el-table-column type="index" width="40"></el-table-column>
        <el-table-column label="开票信息">
          <template slot-scope="scope">
            [{{ scope.row.CSB_ID }}]
            <span style="text-align: left" v-if="scope.row.CSB_RefundID">
              原发票ID:[{{ scope.row.CSB_RefundID }}]
            </span>
            <el-tag :type="scope.row.CSB_Status != 100 ? 'danger' : 'success'">
              {{ scope.row.StatusDesc }}
            </el-tag>
            <div style="text-align: left">
              开票日期:{{ scope.row.CSB_BillDate | formatDate }}
            </div>
            <div style="text-align: left">
              购买方:{{ scope.row.BuyCompanyName }}
            </div>
            <div style="text-align: left" v-if="scope.row.BuyEmployeeName">
              购买人:{{ scope.row.BuyEmployeeName }}
            </div>
            <div style="text-align: left">
              销售方:{{ scope.row.SaleCompanyName }}
            </div>
            <div style="text-align: left" v-if="scope.row.CSBR_Remark">
              备注:{{ scope.row.CSB_Remark }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="开票金额">
          <template slot-scope="scope">
            <div style="text-align: left">
              价税合计:{{ scope.row.CSB_Fee }}元
            </div>
            <div style="text-align: left">
              <span v-if="scope.row.CSB_TaxFee">
                税额:{{ scope.row.CSB_TaxFee }}元
              </span>
              <span v-if="scope.row.CSB_WithOutTaxFee" style="margin-left: 10px">
                金额:{{ scope.row.CSB_WithOutTaxFee }}元
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="机构回款" width="210">
          <template slot-scope="scope">
            <div style="text-align: left" v-if="scope.row.ReturnSum1">
              回款:{{ scope.row.ReturnSum1 }}元
            </div>
            <div style="text-align: left" v-if="scope.row.UnreturnSum1">
              未回款:{{ scope.row.UnreturnSum1 }}元
            </div>
            <div style="
                display: flex;
                flex-direction: column;
                justify-items: center;
              " v-if="scope.row.Returns1.length > 0">
              回款记录：
              <div v-for="r in scope.row.Returns1" :key="r.CSBR_ID" style="margin-bottom: 5px">
                {{ r.CSBR_AccountTime | formatDate }} :{{ r.CSBR_Fee }}元
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="平台回款" width="210">
          <template slot-scope="scope">
            <div style="text-align: left" v-if="scope.row.ReturnSum">
              回款:{{ scope.row.ReturnSum }}元
            </div>
            <div style="text-align: left" v-if="scope.row.UnreturnSum">
              未回款:{{ scope.row.UnreturnSum }}元
            </div>
            <div style="
                display: flex;
                flex-direction: column;
                justify-items: center;
              " v-if="scope.row.Returns.length > 0">
              回款记录：
              <div v-for="r in scope.row.Returns" :key="r.CSBR_ID" style="margin-bottom: 5px">
                {{ r.CSBR_AccountTime | formatDate }} :{{ r.CSBR_Fee }}元
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="案件信息" width="300px">
          <template slot-scope="scope">
            <div v-if="scope.row.CS_No">流水号：{{ scope.row.CS_No }}</div>
            <div v-if="scope.row.CS_DisplayName">
              案件名：{{ scope.row.CS_DisplayName }}
            </div>
            <div>差旅性质：{{ scope.row.BelongCase.EXTY_EnumTxt }}</div>
          </template>
        </el-table-column>
        <el-table-column label="案件信息" width="300px">
          <template slot-scope="scope">
            <div v-for="item in scope.row.BelongCase.Employees" :key="item.CSEP_ID">
              {{ item.CSEP_TypeDesc }}：{{
                item.CCV_TargetID == curEmp.CCV_TargetID ? '' : item.CMP_Name
              }}{{ item.USR_Name ? '[' + item.USR_Name + ']' : '' }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="收费项目">
          <template slot-scope="scope">
            <div v-for="item in scope.row.Charges" :key="item.CSC_ID">
              【{{ item.CHTY_EnumTxt }}】{{ item.CSCG_Fee }}元
            </div>
          </template>
        </el-table-column>
        <el-table-column label="案件成本">
          <template slot-scope="scope">
            <div v-for="item in scope.row.Costs" :key="item.CSC_ID">
              【{{ item.CSC_Name }}】{{ item.CSC_Fee }}元
            </div>
          </template>
        </el-table-column> -->
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <div>
              <el-button @click="
                curBill = scope.row
              imageVis = true
                " type="text" size="small" icon="el-icon-search" title="查看案件详情">
                扫描件
              </el-button>
            </div>
            <div>
              <el-button @click="toCase(scope.row.CSB_CaseID)" type="text" size="small" icon="el-icon-search"
                title="查看案件详情">
                案件详情
              </el-button>
            </div>
            <div>
              <el-button type="text" size="mini" icon="el-icon-refresh-right" v-if="scope.row.CSB_Status == -100"
                @click="
                  () => {
                    curBill = scope.row
                    curBill.CSB_RefundID = scope.row.CSB_ID
                    curBill.CSB_RefundReason = curBill.CSB_RefundTime = null
                    rebillVis = true
                  }
                ">
                重开
              </el-button>
            </div>
            <div>
              <el-button type="text" size="mini" icon="el-icon-edit" @click="
                () => {
                  curBill = scope.row
                  editBillVis = true
                }
              ">
                信息修改
              </el-button>
            </div>
            <div>
              <el-button v-if="scope.row.CBA_FormID" @click="toForm(scope.row.CBA_FormID)" type="text" size="small"
                icon="el-icon-search" title="查看审核流程">
                查看审核流程
              </el-button>
            </div>
            <div>
              <el-button type="text" size="mini" icon="el-icon-refresh-right" v-if="scope.row.CSB_Status == 100" @click="
                () => {
                  curBill = scope.row
                  refundBillVis = true
                }
              ">
                退票
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="width: 100%; height: 40px">
      <div style="
          display: flex;
          padding: 10px 50px 0 5px;
          width: auto;
          float: right;
        ">
        <el-pagination layout="total,prev,pager,next,sizes" style="float: right" background
          :current-page.sync="req.pageIndex" :total="res.Total" :page-size="req.pageSize" :page-sizes="[5, 10, 15]"
          @size-change="
            (val) => {
              req.pageSize = val
              getCompanyCaseBills()
            }
          " @current-change="getCompanyCaseBills()"></el-pagination>
      </div>
    </div>

    <el-dialog title="退票" :visible.sync="refundBillVis" width="500px" :modal-append-to-body="false" center>
      <el-form v-if="curBill" label-width="80px" label-position="left">
        <el-form-item label="退票日期">
          <el-date-picker align="right" v-model="curBill.CSB_RefundTime" placeholder="请选择退票日期"
            value-format="yyyy-MM-dd HH:mm:ss" type="date" style="width: 360px"></el-date-picker>
        </el-form-item>
        <el-form-item label="原因">
          <el-input v-model="curBill.CSB_RefundReason" style="width: 360px" type="textarea" :rows="2"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="refundBill()">退票</el-button>
          <el-button type="text" @click="refundBillVis = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-drawer title="票据修改" :visible.sync="editBillVis" :with-header="false" direction="rtl" size="540px">
      <el-form v-if="curBill" label-width="100px" label-position="left" style="
          margin-left: 20px;
          margin-top: 20px;
          overflow: auto;
          height: 100vh;
        ">
        <el-form-item label="扫描件">
          <el-upload ref="upload" class="avatar-uploader" :action="fileUploadUrl" :show-file-list="false"
            :on-progress="onProgress" :on-error="uploadErr" :on-success="uploadSuccess" :headers="myHeaders">
            <el-image class="avatar" fit="fill" v-if="curBill.FL_SrcPath"
              :src="fileURL + curBill.FL_SrcPath"></el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-progress v-if="uploadPercentage" :percentage="uploadPercentage"></el-progress>
        </el-form-item>
        <el-form-item>
          <el-checkbox label="发票销售方默认为案件处理机构" v-model="defaultSaleCompany"></el-checkbox>
        </el-form-item>
        <el-form-item label="销售方" v-if="!defaultSaleCompany">
          <el-input v-model="curBill.SaleCompanyName" style="width: 360px" v-if="!curBill.EditSaleCompany" readonly>
            <template slot="append">
              <el-button icon="el-icon-edit" @click="
                $set(curBill, 'EditSaleCompany', true)
              curBill.CSB_SaleCompanyID = null
                "></el-button>
            </template>
          </el-input>
          <el-select v-if="curBill.EditSaleCompany" style="width: 360px" v-model="curBill.CSB_SaleCompanyID" filterable
            remote reserve-keyword placeholder="请输入（全称/简称/税号..）关键词搜索" :remote-method="getCompanies" :loading="loading">
            <el-option v-for="item in companies" :key="item.CMP_ID" :label="item.CMP_Name"
              :value="item.CMP_ID"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="购买方">
          <el-input v-model="curBill.BuyCompanyName" style="width: 360px" v-if="!curBill.EditBuyCompany" readonly>
            <template slot="append">
              <el-button icon="el-icon-edit" @click="
                $set(curBill, 'EditBuyCompany', true)
              curBill.CSB_BuyCompanyID = null
                "></el-button>
            </template>
          </el-input>
          <el-select style="width: 360px" v-model="curBill.CSB_BuyCompanyID" filterable remote reserve-keyword
            placeholder="请输入（全称/简称/税号..）关键词搜索" :remote-method="getCompanies" :loading="loading"
            v-if="curBill.EditBuyCompany">
            <el-option v-for="item in companies" :key="item.CMP_ID" :label="item.CMP_Name"
              :value="item.CMP_ID"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="转账人">
          <el-input v-model="curBill.BuyEmployeeName" style="width: 360px" v-if="!curBill.EditBuyEmployee" readonly>
            <template slot="append">
              <el-button icon="el-icon-edit" @click="
                $set(curBill, 'EditBuyEmployee', true)
              curBill.CSB_BuyEmployeeID = null
                "></el-button>
            </template>
          </el-input>
          <el-select v-if="curBill.EditBuyEmployee" style="width: 360px" v-model="curBill.CSB_BuyEmployeeID" filterable
            remote reserve-keyword placeholder="请输入转账人关键词（姓名/手机号）搜索" :remote-method="getEmployees" :loading="loading">
            <el-option v-for="item in employees" :key="item.ECV_TargetID" :label="item.CMP_Name
              ? item.CMP_Name + '_' + item.USR_Name
              : item.USR_Name
              " :value="item.ECV_TargetID"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="编号">
          <el-input v-model="curBill.CSB_No" style="width: 360px"></el-input>
        </el-form-item>
        <el-form-item label="票税合计(元)">
          <el-input-number v-model="curBill.CSB_Fee" :precision="2" style="width: 360px"></el-input-number>
        </el-form-item>
        <el-form-item label="金额(元)">
          <el-input-number v-model="curBill.CSB_WithOutTaxFee" :precision="2" style="width: 360px"></el-input-number>
        </el-form-item>
        <el-form-item label="税额(元)">
          <el-input-number v-model="curBill.CSB_TaxFee" :precision="2" style="width: 360px"></el-input-number>
        </el-form-item>
        <el-form-item label="开票日期">
          <el-date-picker align="right" v-model="curBill.CSB_BillDate" placeholder="请选择开票日期"
            value-format="yyyy-MM-dd HH:mm:ss" type="date" style="width: 360px"></el-date-picker>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="curBill.CSB_Remark" style="width: 360px" type="textarea" :rows="3"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="warning" @click="editBill()">保存</el-button>
          <el-button type="text" @click="editBillVis = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <el-drawer title="票据重开" :visible.sync="rebillVis" :with-header="false" direction="rtl" size="540px">
      <el-form v-if="curBill" label-width="100px" label-position="left" style="
          margin-left: 20px;
          margin-top: 20px;
          overflow: auto;
          height: 100vh;
        ">
        <el-form-item label="扫描件">
          <el-upload ref="upload" class="avatar-uploader" :action="fileUploadUrl" :show-file-list="false"
            :on-progress="onProgress" :on-error="uploadErr" :on-success="uploadSuccess" :headers="myHeaders">
            <el-image class="avatar" fit="fill" v-if="curBill.FL_SrcPath"
              :src="fileURL + curBill.FL_SrcPath"></el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-progress v-if="uploadPercentage" :percentage="uploadPercentage"></el-progress>
        </el-form-item>
        <el-form-item>
          <el-checkbox label="发票销售方默认为案件处理机构" v-model="defaultSaleCompany"></el-checkbox>
        </el-form-item>
        <el-form-item label="销售方" v-if="!defaultSaleCompany">
          <el-input v-model="curBill.SaleCompanyName" style="width: 360px" v-if="!curBill.EditSaleCompany" readonly>
            <template slot="append">
              <el-button icon="el-icon-edit" @click="
                $set(curBill, 'EditSaleCompany', true)
              curBill.CSB_SaleCompanyID = null
                "></el-button>
            </template>
          </el-input>
          <el-select v-if="curBill.EditSaleCompany" style="width: 360px" v-model="curBill.CSB_SaleCompanyID" filterable
            remote reserve-keyword placeholder="请输入（全称/简称/税号..）关键词搜索" :remote-method="getCompanies" :loading="loading">
            <el-option v-for="item in companies" :key="item.CMP_ID" :label="item.CMP_Name"
              :value="item.CMP_ID"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="购买方">
          <el-input v-model="curBill.BuyCompanyName" style="width: 360px" v-if="!curBill.EditBuyCompany" readonly>
            <template slot="append">
              <el-button icon="el-icon-edit" @click="
                $set(curBill, 'EditBuyCompany', true)
              curBill.CSB_BuyCompanyID = null
                "></el-button>
            </template>
          </el-input>
          <el-select style="width: 360px" v-model="curBill.CSB_BuyCompanyID" filterable remote reserve-keyword
            placeholder="请输入（全称/简称/税号..）关键词搜索" :remote-method="getCompanies" :loading="loading"
            v-if="curBill.EditBuyCompany">
            <el-option v-for="item in companies" :key="item.CMP_ID" :label="item.CMP_Name"
              :value="item.CMP_ID"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="转账人">
          <el-input v-model="curBill.BuyEmployeeName" style="width: 360px" v-if="!curBill.EditBuyEmployee" readonly>
            <template slot="append">
              <el-button icon="el-icon-edit" @click="
                $set(curBill, 'EditBuyEmployee', true)
              curBill.CSB_BuyEmployeeID = null
                "></el-button>
            </template>
          </el-input>
          <el-select v-if="curBill.EditBuyEmployee" style="width: 360px" v-model="curBill.CSB_BuyEmployeeID" filterable
            remote reserve-keyword placeholder="请输入转账人关键词（姓名/手机号）搜索" :remote-method="getEmployees" :loading="loading">
            <el-option v-for="item in employees" :key="item.ECV_TargetID" :label="item.CMP_Name
              ? item.CMP_Name + '_' + item.USR_Name
              : item.USR_Name
              " :value="item.ECV_TargetID"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="编号">
          <el-input v-model="curBill.CSB_No" style="width: 360px"></el-input>
        </el-form-item>
        <el-form-item label="票税合计(元)">
          <el-input-number v-model="curBill.CSB_Fee" :precision="2" style="width: 360px"></el-input-number>
        </el-form-item>
        <el-form-item label="金额(元)">
          <el-input-number v-model="curBill.CSB_WithOutTaxFee" :precision="2" style="width: 360px"></el-input-number>
        </el-form-item>
        <el-form-item label="税额(元)">
          <el-input-number v-model="curBill.CSB_TaxFee" :precision="2" style="width: 360px"></el-input-number>
        </el-form-item>
        <el-form-item label="开票日期">
          <el-date-picker align="right" v-model="curBill.CSB_BillDate" placeholder="请选择开票日期"
            value-format="yyyy-MM-dd HH:mm:ss" type="date" style="width: 360px"></el-date-picker>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="curBill.CSB_Remark" style="width: 360px" type="textarea" :rows="3"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="warning" @click="reBill()">重开</el-button>
          <el-button type="text" @click="rebillVis = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <el-dialog :visible.sync="imageVis" width="60%" :modal-append-to-body="false" center>
      <el-image v-if="curBill && curBill.FL_SrcPath" :src="fileURL + curBill.FL_SrcPath" fit="fill"
        :preview-src-list="[fileURL + curBill.FL_SrcPath]"></el-image>
      <div v-else>未上传发票</div>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import {
  getCompanies,
  getEmployees,
  getCompanyCaseBills,
  reBill,
  editBill,
  refundBill,
} from '@/api/finance/caseBill'
import {
  baseURL,
  fileRoot,
  fileUploadRoot,
  tokenName,
  empIdName,
} from '@/config'
import axios from 'axios'

export default {
  data: function () {
    return {
      req: {
        actType: null,
        pageIndex: 1,
        pageSize: 5,
        dealDate1: null,
        dealDate2: null,
        keyword: null,
      },
      res: {
        Items: [],
        Total: 0,
      },
      companies: [],
      employees: [],
      renewBill: null,
      curBill: null,
      defaultSaleCompany: true,
      fileURL: baseURL + fileRoot,
      fileUploadUrl: baseURL + fileUploadRoot,
      editBillVis: false,
      refundBillVis: false,
      rebillVis: false,
      myHeaders: {},
      uploadPercentage: 0,
      loading: false,
      imageVis: false,
    }
  },
  computed: {
    ...mapGetters({
      curEmp: 'user/curEmp',
    }),
  },
  methods: {
    getCompanies(keyword) {
      if (keyword.length >= 2) {
        this.loading = true
        getCompanies({
          keyword,
        }).then(({ data }) => {
          this.companies = data.Items
          this.loading = false
        })
      }
    },
    getEmployees(keyword) {
      if (keyword.length >= 1) {
        this.loading = true
        getEmployees({
          keyword,
        }).then(({ data }) => {
          this.employees = data.Items
          this.loading = false
        })
      }
    },
    uploadSuccess(res) {
      if (res.success) {
        let file = res.data
        this.$set(this.curBill, 'FL_Name', file.FL_Name)
        this.$set(this.curBill, 'FL_SrcPath', file.FL_SrcPath)
        this.$set(this.curBill, 'CSB_FileID', file.FL_ID)
        this.uploadPercentage = 0
        this.ticketFile = this.$refs.upload.uploadFiles.pop().raw
      } else {
        alert(res.errormsg)
      }
    },
    uploadErr(err) {
      alert(JSON.stringify(err))
    },
    onProgress(event) {
      this.uploadPercentage = Math.round(event.percent * 100) / 100
    },
    reBill() {
      reBill(this.curBill).then(() => {
        this.getCompanyCaseBills()
        this.rebillVis = false
      })
    },
    editBill() {
      this.$confirm(`是否保存修改？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        editBill(this.curBill).then(() => {
          this.getCompanyCaseBills()
          this.editBillVis = false
        })
      })
    },
    getCompanyCaseBills() {
      getCompanyCaseBills(this.req).then(({ data }) => {
        this.res = data
      })
    },
    toForm: function (formId) {
      this.$router.push({
        name: 'formInfoPage',
        query: { formId },
      })
    },
    toCase: function (caseId) {
      this.$router.push({
        name: 'caseInfoPage',
        query: { caseId },
      })
    },
    refundBill() {
      if (!this.curBill) {
        return
      }
      this.$confirm(`是否退票？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        refundBill(this.curBill).then(() => {
          this.getCompanyCaseBills()
          this.refundBillVis = false
        })
      })
    },
    outputExcel() {
      if (this.req.dealDate1 == null && this.req.dealDate2 == null) {
        this.$message('请选择导出日期')
        return
      }
      var config = {
        baseURL,
        headers: {},
        responseType: 'blob',
      }
      config.headers[tokenName] = this.$store.getters['user/accessToken']
      config.headers[empIdName] = this.$store.getters['user/curEmp'].EMP_ID
      axios
        .post('/api/Finance/CaseBillStas/OutputCaseBillExcel', this.req, config)
        .then((response) => {
          var blob = new Blob([response.data])
          var downloadElement = document.createElement('a')
          var href = window.URL.createObjectURL(blob) //创建下载的链接
          downloadElement.href = href
          downloadElement.download = '开票统计.xls' //下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() //点击下载
          document.body.removeChild(downloadElement) //下载完成移除元素
          window.URL.revokeObjectURL(href) //释放掉blob对象
        })
        .catch((error) => {
          console.log('response: ', error)
        })
    },
  },
  created: function () {
    var data = this.$store.getters['pagination/getRoutePage'](this.$route)
    Object.assign(this.$data, data)
    this.myHeaders[tokenName] = this.$store.getters['user/accessToken']
    this.myHeaders[empIdName] = this.$store.getters['user/curEmp'].EMP_ID
    this.getCompanyCaseBills()
  },
  beforeRouteLeave(to, from, next) {
    this.$store.dispatch('pagination/setRoutePage', {
      route: this.$route,
      pageData: this.$data,
    })
    next()
  },
}
</script>
<style scoped>
.header {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}

.main {
  height: calc(75vh - 60px);
  overflow: auto;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 300px;
  height: 220px;
  line-height: 220px;
  text-align: center;
  border-style: dashed;
  border-width: thin;
}

.avatar {
  width: 300px;
  height: 220px;
  display: block;
  border-style: dashed;
  border-width: thin;
}
</style>
